import React, { Component } from 'react';
import { StyleSheet, Text, View, TouchableOpacity, Image, Dimensions } from "react-native";
import { CommonData } from '../_common/common.js';
import { API, API_GENERATE } from '../../../../../../config/api';
import HTTP from '../../../../../../utils/http';
import moment from 'moment';

const ScreenWidth = Dimensions.get('window').width;
const ScreenHeight = Dimensions.get('window').height;
const scale = ScreenWidth / 375;
export class TotalMaintenance extends Component {
  static navigationOptions = {
    header: null
  }

  constructor(props) {
    super(props);
    let { visitCntObj, params } = this.props;
    this.params = params;

    this.state = {
      all: true,
      checked: false,
      visitCntObj: visitCntObj || {}
    }
  }

  // async	componentWillMount () {
  //   this._init();
  // }

  //初始数据处理
  _init = async () => {
    this.params.onlyMe = this.state.checked;
    const visitCntObj = await HTTP.POST(API_GENERATE(API.GET_STAFF_CNT), this.params);
    this.setState({ visitCntObj });
  }

  changeType = (type) => {
    switch (type) {
      case 'all':
        this.params.startDate = '';
        this.params.endDate = '';
        this.setState({
          all: true
        }, () => this._init())
        break;
      case 'month':
        this.params.startDate = CommonData._format('date2', moment().subtract(1, 'months').calendar()) || null;
        this.params.endDate = CommonData._format('date2') || null;
        this.setState({
          all: false
        }, () => this._init())
        break;
      default:
        break;
    }

  }

  //改变仅看自己状态
  changeCheck = () => {
    this.setState({
      checked: !this.state.checked
    }, () => this._init())
  }

  render() {
    let { all, checked, visitCntObj } = this.state;
    let { lastVisitDate, visitCntList, totalCnt } = visitCntObj || {};
    return (
      <View>
        <View style={[styles.flexRow, styles.countTop]}>
          <View style={styles.circle}>
            <Text style={styles.commonText}>{totalCnt || 0}</Text>
            <Text style={[styles.commonText, { marginTop: 5 * scale }]}>维护总数</Text>
          </View>
          <View style={{ flex: 1 }}>
            <View style={{ flexDirection: 'row', marginBottom: 40 * scale }}>
              <TouchableOpacity style={[styles.botton, all ? styles.bottonActive : null, { marginRight: 15 }]} onPress={() => { this.changeType('all') }}>
                <Text style={[styles.bottonText, all ? styles.bottonTextActive : null]}>全部</Text>
              </TouchableOpacity>
              <TouchableOpacity style={[styles.botton, all ? null : styles.bottonActive]} onPress={() => { this.changeType('month') }}>
                <Text style={[styles.bottonText, all ? null : styles.bottonTextActive]}>当月</Text>
              </TouchableOpacity>
              <TouchableOpacity style={styles.flexRow} onPress={this.changeCheck}>
                {
                  checked ?
                    <Image source={require('../../../../../../imgs/checkbox-checked.png')} style={styles.checkImg} /> :
                    <Image source={require('../../../../../../imgs/checkbox.png')} style={styles.checkImg} />
                }
                <Text style={{ color: '#0E7FFD', fontSize: 10 * scale }}>仅看自己</Text>
              </TouchableOpacity>
            </View>
            <View style={styles.flexRow}>
              <Text style={styles.commonText}>上次维护时间：</Text>
              <Text style={styles.commonText}>{lastVisitDate && lastVisitDate.substring(0, 10) || '--'}</Text>
            </View>
          </View>
        </View>
        <View style={{ flexDirection: 'row', flexWrap: 'wrap' }}>
          {
            visitCntList && visitCntList.length ?
              visitCntList.map((item, index) => {
                return (
                  <View style={styles.flex} key={index}>
                    <Text style={{ fontSize: 14 * scale }}>{item.cnt}</Text>
                    <Text style={{ fontSize: 12 * scale, marginTop: 5 * scale }}>{item.visitTypeName}</Text>
                  </View>
                )
              }) : null
          }
        </View>
      </View>
    )
  }
}


const styles = StyleSheet.create({
  flexRow: {
    width: '100%',
    flexDirection: 'row',
    alignItems: 'center',
  },
  countTop: {
    marginTop: 60 * scale,
    paddingBottom: 46 * scale,
    borderBottomColor: '#E3E7F0',
    borderBottomWidth: 1
  },
  circle: {
    width: 109 * scale,
    height: 109 * scale,
    borderWidth: 15 * scale,
    borderRadius: 100 * scale,
    borderColor: '#0E7FFD',
    marginLeft: 19 * scale,
    marginRight: 28 * scale,
    alignItems: 'center',
    justifyContent: 'center'
  },
  botton: {
    width: 50 * scale,
    height: 20 * scale,
    borderRadius: 15 * scale,
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: '#F4F7FE'
  },
  bottonActive: {
    backgroundColor: '#0E7FFD'
  },
  bottonText: {
    fontSize: 12 * scale,
    color: '#0E7FFD'
  },
  bottonTextActive: {
    color: '#fff'
  },
  checkImg: {
    width: 12 * scale,
    height: 12 * scale,
    marginLeft: 22 * scale,
    marginRight: 10 * scale,
  },
  flex: {
    // flex: 1,
    width: '33%',
    justifyContent: 'center',
    alignItems: 'center',
    marginTop: 25 * scale,
    marginBottom: 10 * scale,
  },
  commonText: {
    fontSize: 12 * scale,
  }
})